﻿@{
    ViewBag.Title = "User Manual";
}
<h3>@ViewBag.Title.</h3>

<div class="panel-group" id="accordion">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">
                    My Home Page
                </a>
            </h4>
        </div>
        <div id="collapse1" class="panel-collapse collapse in">
            <div class="panel-body">
                <b>My Home page</b> is available for all users.
                To access <b>My Home page</b>, follow below steps:
                <ul style="list-style-type: none">
                    <li> <span class="badge">1</span> Click on Current User image</li>
                    <li><span class="badge">2</span> Click on Current User name</li>
                </ul> 

                <img src='@Url.Content("~/Content/Images/Home.png")' style="width:80%" />
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">
                    My Note
                </a>
            </h4>
        </div>
        <div id="collapse2" class="panel-collapse collapse">
            <div class="panel-body">
                <b>My Note</b> is available for all users.
                <ul style="list-style-type: none">
                    <li>Click on <span class="badge">1</span> to create a new Note</li>
                    <li>Click on <span class="badge">2</span> to modify an existing Note</li>
                    <li>Click on <span class="badge">3</span> to delete an existing Note</li>
                </ul> 
                <b>My Note</b> can be searched by Year or Key word <span class="badge">4</span>.
                <img src='@Url.Content("~/Content/Images/MyNote.png")' style="width:80%" />
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#collapse4">
                    Manager Note
                </a>
            </h4>
        </div>
        <div id="collapse4" class="panel-collapse collapse">
            <div class="panel-body">
                <b>Manager Note</b> is available for managers and not for employees. Each note is visible for creator only.
                <ul style="list-style-type: none">
                    <li>Click on <span class="badge">1</span> to create a new Note</li>
                    <li>Click on <span class="badge">2</span> to modify an existing Note</li>
                    <li>Click on <span class="badge">3</span> to delete an existing Note</li>
                    <li><b>My Note</b> can be searched by Year or Key word <span class="badge">4</span>.</li>
                    <li>To access employee site, manager has to enter employee name into search text box <span class="badge">5</span></li>
                </ul>
                <img src='@Url.Content("~/Content/Images/ManagerNote.png")' style="width:80%" />
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#collapse3">
                    Manager Conversations
                </a>
            </h4>
        </div>
        <div id="collapse3" class="panel-collapse collapse">
            <div class="panel-body">
                <b>Manager Conversations</b> is available for managers only.
                <ul style="list-style-type: none">
                    <li>To access employee site, manager has to enter employee name into search text box <span class="badge">6</span></li>
                    <li>To start a new conversation, click on <span class="badge">1</span></li>
                    <li>To view or give comments on a conversation, click on <span class="badge">3</span></li>
                    <li>Enter comment into text box <span class="badge">4</span> and press Enter to post the comment</li>
                    <li>To search conversations by emoticons, classifications or key words, use filter  <span class="badge">2</span></li>
                    <li>To expand or collapse all conversations, click on <span class="badge">5</span></li>
                </ul>
                <img src='@Url.Content("~/Content/Images/Conversation.png")' style="width:80%" />
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#collapse5">
                    Feedback
                </a>
            </h4>
        </div>
        <div id="collapse5" class="panel-collapse collapse">
            <div class="panel-body">
                <b>Feedback</b> is available for all users.
                <ul style="list-style-type: none">
                    <li>User has to navigate to another user site to give <b>Feedback</b></li> 
                    <li>To access another site, user has to enter employee name into search text box <span class="badge">7</span></li>
                    <li>To give new feedback, click on <span class="badge">1</span></li>
                    <li>Users can modify or delete their own feedbacks by clicking on <span class="badge">2</span> <span class="badge">3</span></li>
                    <li>To comment on an existing feedback, user has to first select feedback <span class="badge">4</span> and enter to text box <span class="badge">5</span></li>
                    <li>Users can delete their own comments <span class="badge">6</span></li>
                    <li>If a feedback is marked as <b>Private</b>, it will only visible to creator, receiver and receiver' managers</li>
                    <li><b>Public</b> feedback is visible to all users.</li>
                </ul>
                <img src='@Url.Content("~/Content/Images/Feedback.png")' style="width:80%" />
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#collapse6">
                    Manager Report
                </a>
            </h4>
        </div>
        <div id="collapse6" class="panel-collapse collapse">
            <div class="panel-body">
                <b>Manager Report</b> is available for managers only.
                <ul style="list-style-type: none">
                    <li>To access <b>Report Filter</b>, click on <span class="badge">1</span></li>
                    <li>Select Year when <b>Conversations</b> and <b>Feedbacks</b> were created <span class="badge">2</span></li>
                    <li>If user wants to include data from indirect employee into the report, select checkbox <span class="badge">3</span></li>
                    <li>Select groups, departments that user wants to view report <span class="badge">4</span></li>
                </ul>
                <img src='@Url.Content("~/Content/Images/ReportFilter.png")' style="width:80%" />
                <hr/>
                <ul style="list-style-type: none">
                    <li>To view <b>Conversations data</b>, click on <span class="badge">1</span></li>
                    <li>To view <b>Feedbacks data</b>, click on <span class="badge">2</span></li>
                    <li><span class="badge">3</span> is data filter</li>
                    <li>To access <b>Conversations</b> or <b>Feedbacks</b> of one user, click on name of that user <span class="badge">4</span></li>
                </ul>
                <img src='@Url.Content("~/Content/Images/Report.png")' style="width:80%" />
            </div>
        </div>
    </div>
</div> 

